Overflow

為 Interview Bit的第 46 題。

介紹

overflow 控制對太大而區域無法容納的內容的處理方式。

overflow 屬性可以設定以下值：

• visible
• hidden
• scroll
• auto

visible

預設值，如果內容超出 box 以外，則會溢出。

hidden

多出來的內會被隱藏，內容會看不到

scroll

scroll bar永遠存在，多出來的內會被隱藏，可以使用 scroll bar 看到它的內容

auto

跟 scroll 類似，但是只有必要的時候才會出現 scroll bar

overflow-x：可設定「水平」方向，當超出範圍時自動變成 scroll bar 呈現方式。(需要內有寬度大於元素框的物件)
overflow-y：可設定「垂直」方向，當超出範圍時自動變成 scroll bar 呈現方式。

有時候會遇到 overflow-x 或者是 overflow-y 無效，那是為什麼?
CodePen 範例

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

ul {
  white-space: nowrap;
  overflow-x: visible;
  overflow-y: hidden;
  /* added width so it would work in the snippet */
  width: 100px;
}
li {
  display: inline-block;
  padding: 20px;
}

原因：
根據 W3C spec：

The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as their specified values, except that some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if ‘overflow-y’ is the same; otherwise it is the pair of computed values of ‘overflow-x’ and ‘overflow-y’.

簡單來說，如果在 overflow-x 或是 overflow-y使用 visible，且剩下的一個不是 visible，那麼使用到 visible的會被變成 auto。

也就是下面這一張表格，所以上面的範例， overflow-x: visible 變成 overflow-x: auto，所以有 scrollbar。

解決方法：
CodePen

在外面加一個 div wrapper，寬度占 100%，並設置 overflow: hidden，表示超出這一個 div wrapper 的寬度，則要隱藏起來。
在原本的 ul 中，將 overflow: visible，表示如果超出 ul寬度，則一樣會顯示文字

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
  </ul>
</div>

div {
  overflow-y: hidden;
  /*debug only*/
  border: 1px solid red;
}
ul {
  white-space: nowrap;
  overflow: visible;
  /* added width so it would work in the snippet */
  width: 100px;
   /*debug only*/
  border: 1px solid green;

}
li {
  display: inline-block;
  padding: 20px;
}

結果圖：

參考資料：
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
[CSS] overflow 同時設置 visible 與其他屬性衝突問題